<template>
  <wd-overlay :show="value" @click="$emit('closeMode')" :z-index="1000">
    <view class="box">
      <view class="notice">
        <image class="share" src="/static/images/share-white.png" alt="" />
        长按图片发送给朋友
      </view>
      <view class="wrapper">
        <MCanvas
          :width="614"
          :height="1000"
          :background="{
            color: '#ffffff',
            radius: 30,
            holeTop: 725,
          }"
          :elementList="elementList"
        />
      </view>
      <view class="close-box" @click="$emit('closeMode')">
        <span class="close i-carbon-close-outline"></span>
      </view>
    </view>
  </wd-overlay>
</template>

<script>
import MCanvas from './MCanvas/MCanvas.vue'

export default {
  components: { MCanvas },
  props: {
    value: {
      type: Boolean,
      default: false,
    },
    qrcodePath: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      elementList: {
        // 图片对象
        images: [
          {
            path: 'https://img.js.design/assets/img/66123996373a5bc9f1df176d.png', // 图片路径[必填]注意h5不能跨域下载图片，需处理跨域问题
            dx: 38, // 左上角x轴[必填]
            dy: 38, // 左上角y轴[必填]
            dWidth: 538, // 宽度[必填]
            dHeight: 538, // 高度[必填]
            radius: 30,
          },
        ],
        text: [
          {
            value: '毗邻鸟巢水立方，二室一厅套房', // 渲染的文字
            color: '#070B1A', // 文字颜色[选填]
            size: 30, // 大小[选填]
            x: 40, // 左上角x轴[必填]
            y: 630, // 左上角y轴[必填]
          },
          {
            value: '￥', // 渲染的文字
            color: '#FF5940', // 文字颜色[选填]
            size: 25, // 大小[选填]
            x: 40, // 左上角x轴[必填]
            y: 690, // 左上角y轴[必填]
          },
          {
            value: '841', // 渲染的文字
            color: '#FF5940', // 文字颜色[选填]
            size: 38, // 大小[选填]
            x: 65, // 左上角x轴[必填]
            y: 690, // 左上角y轴[必填]
          },
          {
            value: '长按二维码识别', // 渲染的文字
            color: '#070B1A', // 文字颜色[选填]
            size: 30, // 大小[选填]
            x: 270, // 左上角x轴[必填]
            y: 850, // 左上角y轴[必填]
          },
          {
            value: '分享自 张柏芝', // 渲染的文字
            color: '#8A8F99', // 文字颜色[选填]
            size: 25, // 大小[选填]
            x: 270, // 左上角x轴[必填]
            y: 900, // 左上角y轴[必填]
          },
        ],
        qr: [
          {
            url: 'http://xxx.com', // 二维码文字[必填]
            dx: 40, // 左上角x轴[必填]
            dy: 770, // 左上角y轴[必填]
            size: 192, // 二维码大小
            color: '#333333', // 二维码前景色
            backgroundColor: '#F7F7F7', // 二维码背景色
          },
        ],
      },
    }
  },
  watch: {
    value: {
      immediate: true,
      handler(newVal) {
        // uni.showLoading({
        //   mask: true,
        //   title: '海报生成中…',
        // })
      },
    },
  },
  methods: {},
}
</script>

<style lang="scss" scoped>
.box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  width: 100%;
  height: 100%;
  .notice {
    padding-top: 40rpx;
    color: white;
    .share {
      width: 16px;
      height: 16px;
      vertical-align: sub;
    }
  }
  .wrapper {
    font-size: 16px;
    text-align: center;

    .poster-canvas {
      position: absolute;
      top: -10000px; // 将画布隐藏在可视区域外
      z-index: 8;
      box-sizing: border-box;
      border-radius: 10px;
      transform: scale(0.5);
    }

    .poster-img {
      position: relative;
      z-index: 9;
      box-sizing: border-box;
      width: 100%;
      height: 100%;
      border-radius: 10px;
    }
  }

  .close-box {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 36px;
    padding-bottom: 34rpx;
    .close {
      width: 31px;
      height: 31px;
      font-size: 30rpx;
      color: #fff;
    }
  }
}
</style>
